<template>
  <div class="box">
    <div>
      <div>
        <el-card class="card-01">
          <div class="zhpj">
            <span class="zhpj-span">综合评价</span>
          </div>
          <div class="echarts-01">
            <div class="lh-css">{{ state.shu1 }}</div>
            <div class="wdsd-css">
              <div>
                <div class="dushu-01">
                  <p class="wendu">温度</p>
                  <p class="dushu">
                    {{ state.wen1 }}<span class="spancdu">℃</span>
                  </p>
                  <p class="fangwei">（18~20）</p>
                </div>
                <div>
                  <p class="wendu">二氧化碳</p>
                  <p class="dushu">
                    {{ state.er1 }}<span class="spancdu">ppm</span>
                  </p>
                  <p class="fangwei">（≤1,000）</p>
                </div>
              </div>

              <div>
                <div class="dushu-01">
                  <p class="wendu">湿度</p>
                  <p class="dushu">
                    {{ state.shi1 }}<span class="spancdu">%</span>
                  </p>
                  <p class="fangwei">（30~60）</p>
                </div>
                <div>
                  <p class="wendu">PM2.5</p>
                  <p class="dushu">
                    {{ state.pm1 }}<span class="spancdu">µg/m³</span>
                  </p>
                  <p class="fangwei">（≤1,000）</p>
                </div>
              </div>
            </div>
          </div>
          <div class="echats-main">
            <div id="main" style="width: 500px; height: 200px"></div>
            <div class="title-echrts">总体趋势</div>
            <div class="select-css">
              <el-select @change="ZongHeType" v-model="ZongHeStr">
                <el-option label="温度" value="温度" />
                <el-option label="湿度" value="湿度" />
                <el-option label="CO₂" value="CO2" />
                <el-option label="PM2.5" value="PM2.5" />
              </el-select>
            </div>

            <div class="selectRiqi">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="dateZh"
                @change="dateZhChange"
                type="date"
                placeholder="请选择日期"
              />
            </div>
          </div>
        </el-card>
      </div>

      <div>
        <div>
          <el-card class="card-02">
            <div class="zhpj">
              <span class="zhpj-span">典型点位信息</span>
            </div>

            <!-- 办公大堂 -->
            <div class="bangong">办公区域T1 7F空调箱送风</div>
            <div class="echarts-01">
              <div class="lh-css">{{ state.shu2 }}</div>
              <div class="wdsd-css">
                <div>
                  <div class="dushu-01">
                    <p class="wendu">温度</p>
                    <p class="dushu">
                      {{ state.wen2 }}<span class="spancdu">℃</span>
                    </p>
                    <p class="fangwei">（18~20）</p>
                  </div>
                  <div>
                    <p class="wendu">二氧化碳</p>
                    <p class="dushu">
                      {{ state.er2 }}<span class="spancdu">ppm</span>
                    </p>
                    <p class="fangwei">（≤1,000）</p>
                  </div>
                </div>

                <div>
                  <div class="dushu-01">
                    <p class="wendu">湿度</p>
                    <p class="dushu">
                      {{ state.shi2 }}<span class="spancdu">%</span>
                    </p>
                    <p class="fangwei">（30~60）</p>
                  </div>
                  <div>
                    <p class="wendu">PM2.5</p>
                    <p class="dushu">
                      {{ state.pm2 }}<span class="spancdu">µg/m³</span>
                    </p>
                    <p class="fangwei">（≤1,000）</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="echats-main">
              <div id="main2" style="width: 500px; height: 200px"></div>
              <div class="title-echrts">趋势</div>
              <div class="select-css">
                <el-select
                  v-model="BanGongStr"
                  @change="BanGongType"
                  placeholder="PM2.5"
                >
                  <el-option label="温度" value="温度" />
                  <el-option label="湿度" value="湿度" />
                  <el-option label="CO₂" value="CO₂" />
                  <el-option label="PM2.5" value="PM2.5" />
                </el-select>
              </div>

              <div class="selectRiqi">
                <el-date-picker
                  :disabled-date="disabledDate"
                  v-model="dateT1"
                  type="date"
                  placeholder="请选择日期"
                  @change="dateT1Change"
                />
              </div>
              <div class="xuxian"></div>
            </div>

            <!-- 办公区域 -->
            <div>
              <div class="bangong1">办公区域T2 8F空调箱送风</div>
              <div class="echarts-02">
                <div class="lh-css">{{ state.shu3 }}</div>

                <div class="wdsd-css">
                  <div>
                    <div class="dushu-01">
                      <p class="wendu">温度</p>
                      <p class="dushu">
                        {{ state.wen3 }}<span class="spancdu">℃</span>
                      </p>
                      <p class="fangwei">（18~20）</p>
                    </div>
                    <div>
                      <p class="wendu">二氧化碳</p>
                      <p class="dushu">
                        {{ state.er3 }}<span class="spancdu">ppm</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>

                  <div>
                    <div class="dushu-01">
                      <p class="wendu">湿度</p>
                      <p class="dushu">
                        {{ state.shi3 }}<span class="spancdu">%</span>
                      </p>
                      <p class="fangwei">（30~60）</p>
                    </div>
                    <div>
                      <p class="wendu">PM2.5</p>
                      <p class="dushu">
                        {{ state.pm3 }}<span class="spancdu">µg/m³</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="echats-main">
                <div id="main3" style="width: 500px; height: 200px"></div>
                <div class="title-echrts">趋势</div>
                <div class="select-css">
                  <el-select
                    v-model="QuYuStr"
                    @change="QuYuType"
                    placeholder="温度"
                  >
                    <el-option label="温度" value="温度" />
                    <el-option label="湿度" value="湿度" />
                    <el-option label="CO₂" value="CO₂" />
                    <el-option label="PM2.5" value="PM2.5" />
                  </el-select>
                </div>

                <div class="selectRiqi">
                  <el-date-picker
                    :disabled-date="disabledDate"
                    v-model="dateT2"
                    type="date"
                    @change="dateT2Change"
                    placeholder="请选择日期"
                  />
                </div>
                <div class="xuxian"></div>
              </div>
            </div>

            <!-- 商业区域 -->
            <div>
              <div class="bangong1">商场区域L2F LG奈雪の茶门口送风</div>
              <div class="echarts-02">
                <div class="lh-css">{{ state.shu4 }}</div>

                <div class="wdsd-css">
                  <div>
                    <div class="dushu-01">
                      <p class="wendu">温度</p>
                      <p class="dushu">
                        {{ state.wen4 }}<span class="spancdu">℃</span>
                      </p>
                      <p class="fangwei">（18~20）</p>
                    </div>
                    <div>
                      <p class="wendu">二氧化碳</p>
                      <p class="dushu">
                        {{ state.er4 }}<span class="spancdu">ppm</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>

                  <div>
                    <div class="dushu-01">
                      <p class="wendu">湿度</p>
                      <p class="dushu">
                        {{ state.shi4 }}<span class="spancdu">%</span>
                      </p>
                      <p class="fangwei">（30~60）</p>
                    </div>
                    <div>
                      <p class="wendu">PM2.5</p>
                      <p class="dushu">
                        {{ state.pm4 }}<span class="spancdu">µg/m³</span>
                      </p>
                      <p class="fangwei">（≤1,000）</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="echats-main">
                <div id="main4" style="width: 500px; height: 200px"></div>
                <div class="title-echrts">趋势</div>
                <div class="select-css">
                  <el-select
                    v-model="ShangYeStr"
                    @change="ShangYeType"
                    placeholder="温度"
                  >
                    <el-option label="温度" value="温度" />
                    <el-option label="湿度" value="湿度" />
                    <el-option label="CO₂" value="CO₂" />
                    <el-option label="PM2.5" value="PM2.5" />
                  </el-select>
                </div>

                <div class="selectRiqi">
                  <el-date-picker
                    :disabled-date="disabledDate"
                    v-model="dateL2"
                    type="date"
                    @change="dateL2Change"
                    placeholder="请选择日期"
                  />
                </div>
                <div class="xuxian"></div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <div>
      <el-card class="card-03">
        <div class="zhpj">
          <span class="zhpj-span">防疫模式</span>
        </div>
        <div class="switch-css">
          <div>
            <span>商场区域</span>
            <el-switch v-model="value1" disabled class="mb-2" />
          </div>
          <div>
            <span>办公大厅</span>
            <el-switch v-model="value2" disabled class="mb-2" />
          </div>

          <div>
            <span>办公区域（走道？典型办公室？）</span>
            <el-switch v-model="value3" disabled class="mb-2" />
          </div>
        </div>
      </el-card>

      <el-card class="card-04">
        <div class="zhpj">
          <span class="zhpj-span">区域舒适性</span>

          <div class="anniu">
            <div
              :class="indexValue == idx ? 'bccolorDiv' : 'Div'"
              @click="qiehuan(idx, item.val)"
              v-for="(item, idx) in areaTab"
              :key="idx"
            >
              <span> {{ item.cont }}</span>
            </div>
          </div>
        </div>

        <div class="block">
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="datetimes"
            type="date"
            placeholder="请选择时间"
          />
        </div>
        <div>
          <div id="main5" style="width: 800px; height: 782px"></div>
        </div>
      </el-card>

      <el-card class="card-05">
        <div class="zhpj">
          <span class="zhpj-span">相关性分析</span>
          <div class="select-css">
            <div class="select01">
              <el-select @change="XiangGuanType" v-model="XiangGuanStr">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="select02">
              <el-select @change="XiangGuanType" v-model="XiangGuanStr2">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="block_time">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="start_end_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="dateXiangGuanChange"
              />
            </div>
          </div>
        </div>
        <div class="main6">
          <div class="dwxshi">单位显示</div>
          <div id="main6" style="width: 800px; height: 265px"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
// import packagingEchats from "@/components/packagingEchats/index";
import { Analysis, getdwMsg, getAreaComfort } from "@/api/model/echarts";
import * as echarts from "echarts";
import dayjs from "dayjs";
// 禁用今天之后的日期
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const areaTab = reactive([
  { cont: "温度场", val: "t", max: 50, min: 0 },
  { cont: "湿度场", val: "h", max: 130, min: 0 },
  { cont: "CO₂场", val: "co2", max: 130, min: 0 },
  { cont: "PM场", val: "pm2.5", max: 130, min: 0 },
]);
const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);
const indexValue = ref(0);
const datetimes = ref("");
const start_end_time = ref([
  dayjs().format("YYYY-MM-DD"),
  dayjs().format("YYYY-MM-DD"),
]);
const qiehuan = (i, type) => {
  indexValue.value = i;
  getAreaComforts(type);
};
const ShangYeStr = ref("温度");
const BanGongStr = ref("温度");
const QuYuStr = ref("温度");
const ZongHeStr = ref("温度");
const XiangGuanStr = ref("温度");
const XiangGuanStr2 = ref("CO₂");
const dateT1 = ref(dayjs().format("YYYY-MM-DD"));
const dateT2 = ref(dayjs().format("YYYY-MM-DD"));
const dateL2 = ref(dayjs().format("YYYY-MM-DD"));
const dateZh = ref(dayjs().format("YYYY-MM-DD"));
const options = reactive([
  {
    value: "温度",
    label: "室外温度",
    unit: "℃",
  },
  {
    value: "湿度",
    label: "室外湿度",
    unit: "%",
  },
]);
const options2 = reactive([
  {
    value: "CO₂",
    label: "CO₂",
    unit: "ppm",
  },
  {
    value: "PM2.5",
    label: "pm2.5",
    unit: "µg/m³",
  },
]);

const state = reactive({
  f: {
    indicatorName: "相关性分析",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    dataType: "hour",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },

  // 综合评价
  shu1: "",
  wen1: "",
  er1: "",
  pm1: "",
  shi1: "",

  // 办公大堂
  shu2: "",
  wen2: "",
  er2: "",
  pm2: "",
  shi2: "",

  // 办公区域
  shu3: "",
  wen3: "",
  er3: "",
  pm3: "",
  shi3: "",
  // 办公区域
  shu4: "",
  wen4: "",
  er4: "",
  pm4: "",
  shi4: "",
});
const BanGongType = (val) => {
  getBanGong(val, dateT1.value);
};
const QuYuType = (val) => {
  getQuYu(val, dateT2.value);
};
const ShangYeType = (val) => {
  getShangYe(val, dateL2.value);
};
const ZongHeType = (val) => {
  console.log(val, dateZh.value, 504);
  getZongHe(val, dateZh.value);
};
const XiangGuanType = () => {
  F(XiangGuanStr.value, XiangGuanStr2.value, [
    start_end_time.value[0],
    start_end_time.value[1],
  ]);
};

onMounted(() => {
  getZongHe("温度");
  getBanGong("温度");
  getQuYu("温度");
  getShangYe("温度");
  getAreaComforts("t");
  F("温度", "CO₂");
  getdwMsgs();
});
// 区域舒适性
async function getAreaComforts(type) {
  const res = await getAreaComfort(type);
  let myChart5 = echarts.init(document.getElementById("main5"));
  const hours = ["T1", "T2", "M1", "M2", "M3"];
  const days = [
    "LG2",
    "LG1",
    "1F",
    "2F",
    "3F",
    "4F",
    "5F",
    "6F",
    "7F",
    "8F",
    "9F",
    "屋顶",
  ];

  // const data = [].map(function (item) {
  //   return [item[1], item[0], item[2] || "-"];
  // });
  const data = [];
  res.data.forEach((item) => {
    let x = hours.indexOf(item.area);
    let y = days.indexOf(item.storey);
    data.push([x, y, item.val]);
  });
  myChart5.setOption({
    tooltip: {
      position: "top",
      formatter: function (item) {
        return "code：" + res.data[item.dataIndex].code;
      },
    },
    grid: {
      height: "50%",
      top: "8%",
    },
    xAxis: {
      type: "category",
      data: hours,
      splitArea: {
        show: true,
      },
    },
    yAxis: {
      type: "category",
      data: days,
      splitArea: {
        show: true,
      },
    },
    visualMap: {
      max: areaTab[indexValue.value].max,
      min: areaTab[indexValue.value].min,
      calculable: true,
      left: "right",
      bottom: "55%",
      inRange: {
        color: [
          "blue",
          "aqua",
          "#7FFF80",
          "yellow",
          "red",
          "#8F0000",
          // "#BFFF3F",
          // "#FFDF00",
          // "#EF0100",
        ], // 修改热力图的颜色 淡蓝色=>深蓝色的过度
      },
    },
    series: [
      {
        type: "heatmap",
        zlevel: 0,
        data: data,
        label: {
          show: true,
        },

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
            borderWidth: 10,
          },
        },
      },
    ],
  });
}
// 相关性
async function F(
  type,
  type2,
  date = [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
) {
  let str1 = "";
  let str2 = "";
  if (type == "温度") {
    str1 = "℃";
  } else {
    str1 = "%";
  }
  if (type2 == "PM2.5") {
    str2 = "µg/m³";
  } else {
    str2 = "ppm";
  }
  console.log(str1, str2, 633);
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date[0]).format("YYYY-MM-DD"),
    dayTo: dayjs(date[1]).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室外",
    thirdType: type,
    projectId: 1,
  };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  console.log("相关性请求数据", obj);
  let { data: res } = await Analysis(obj);
  console.log("相关性数据", res);
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let obj2 = {
    dataType: "hour",
    dayFrom: dayjs(date[0]).format("YYYY-MM-DD"),
    dayTo: dayjs(date[1]).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室外",
    thirdType: type2,
    projectId: 1,
  };
  let data01 = ["0"]; // 时间
  let data12 = ["0"]; // type1数据
  let data22 = ["0"]; // type2数据
  let data32 = ["0"]; // type3数据
  let { data: res2 } = await Analysis(obj2);
  if (res2.code == 200) {
    res2.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data12.push(item.number1);
      } else if (item.type == "type2") {
        data22.push(item.number1);
      } else if (item.type == "type3") {
        data32.push(item.number1);
      }
      data01.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }

  let myChart2 = echarts.init(document.getElementById("main6"));
  myChart2.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: [type, type2],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data,
      min: 1,
    },
    yAxis: [
      { type: "value", name: str1 },
      { type: "value", name: str2 },
    ],

    series: [
      {
        name: type,
        type: "line",
        stack: "Total",
        data: data1,
        lineStyle: { color: "#ccc" },
        itemStyle: { color: "#ccc" },
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: [
            {
              yAxis: 80,
              lineStyle: { color: "#23bb68" },
              label: {
                color: "#7E7E7E",
                formatter: "美国标准",
                position: "insideEndTop",
                fontSize: 12,
              },
            },
          ],
          label: {
            show: true,
          },
        },
      },

      {
        name: type2,
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data12,
        yAxisIndex: 1,
      },
    ],
  });
  /*
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室外",
    thirdType: type,
  };
  let data = []; // 时间
  let data1 = []; // type1数据
  let data2 = []; // type2数据
  let data3 = []; // type3数据
  let res = await Analysis(obj);
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(item.hour);
    });
  }
  let myChart6 = echarts.init(document.getElementById("main6"));
  myChart6.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室外", "室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        lineStyle: { color: "#325bd0" },
        itemStyle: { color: "#325bd0" },
        data: data2,
      },
    ],
  });
  */
}
// 实时温湿度信息
const getdwMsgs = async () => {
  let { data } = await getdwMsg();
  console.log("实时温湿度信息", data);
  state.wen2 = data["area0-t"];
  state.shi2 = parseFloat(data["area0-h"]).toFixed(1);
  state.shu1 = data["syn-eva"];
  state.shu2 = data["area0-eva"];
  state.shu3 = data["area1-eva"];
  state.shu4 = data["area2-eva"];
  // state.shi2 = (data["area0-h"] * 100).toFixed(1);
  state.wen3 = data["area1-t"];
  state.shi3 = parseFloat(data["area1-h"]).toFixed(1);
  // state.shi3 = (data["area1-h"] * 100).toFixed(1);
  state.wen4 = data["area2-t"];
  state.shi4 = parseFloat(data["area2-h"]).toFixed(1);
  state.wen1 = data["syn-t"];
  state.shi1 = parseFloat(data["syn-h"]).toFixed(1);
  // state.shi4 = (data["area2-h"] * 100).toFixed(1);
};
const getZongHe = async (type, date = dayjs().format("YYYY-MM-DD")) => {
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室外",
    thirdType: type,
    projectId: 1,
  };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  let { data: res } = await Analysis(obj);
  console.log(res, 874);
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let obj2 = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "室内",
    thirdType: type,
    projectId: 1,
  };
  let data01 = ["0"]; // 时间
  let data12 = ["0"]; // type1数据
  let data22 = ["0"]; // type2数据
  let data32 = ["0"]; // type3数据
  let { data: res2 } = await Analysis(obj2);
  if (res2.code == 200) {
    res2.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data12.push(item.number1);
      } else if (item.type == "type2") {
        data22.push(item.number1);
      } else if (item.type == "type3") {
        data32.push(item.number1);
      }
      data01.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let datagb;

  if (type == "CO2") {
    datagb = [
      {
        yAxis: 1000,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 800,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "美标",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 600,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "WHO",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
    ];
  } else if (type == "PM2.5") {
    datagb = [
      {
        yAxis: 75,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标二级",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 35,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "国标一级",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
      {
        yAxis: 15,
        // lineStyle: { color: "#23bb68" },
        label: {
          color: "#7E7E7E",
          formatter: "WHO",
          position: "insideEndTop",
          fontSize: 12,
        },
      },
    ];
  } else {
    datagb = [];
  }
  let myChart2 = echarts.init(document.getElementById("main"));
  myChart2.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室内", "室外"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data,
      min: 1,
    },
    yAxis: { type: "value" },
    series: [
      {
        name: "室外",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: datagb,
          label: {
            show: true,
          },
        },
      },
      {
        name: "室内",
        type: "line",
        stack: "Total",
        data: data12,
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: datagb,
          label: {
            show: true,
          },
        },
      },
    ],
  });
};

const getBanGong = async (type, date = dayjs().format("YYYY-MM-DD")) => {
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "办公区域T1-趋势",
    thirdType: type,
    projectId: 1,
  };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  let { data: res } = await Analysis(obj);
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  let myChart2 = echarts.init(document.getElementById("main2"));
  myChart2.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      data: ["室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      // data: [
      //   "00:00",
      //   "02:00",
      //   "04:00",
      //   "06:00",
      //   "08:00",
      //   "10:00",
      //   "12:00",
      //   "14:00",
      //   "16:00",
      //   "18:00",
      //   "20:00",
      //   "22:00",
      //   "24:00",
      // ],
      data,
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
        //设置基准线
        markLine: {
          symbol: "none", //去掉箭头
          lineStyle: {
            type: "solid",
            color: "#e76f70", // 这儿设置安全基线颜色
            width: 3,
          },
          data: [
            {
              yAxis: 80,
              lineStyle: { color: "#23bb68" },
              label: {
                color: "#7E7E7E",
                formatter: "美国标准",
                position: "insideEndTop",
                fontSize: 12,
              },
            },
          ],
          label: {
            show: true,
          },
        },
      },

      {
        name: "室外",
        type: "line",
        stack: "Total",
        data: data2,
      },
    ],
  });
};
const getQuYu = async (type, date = dayjs().format("YYYY-MM-DD")) => {
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "办公区域T2-趋势",
    thirdType: type,
    projectId: 1,
  };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  let { data: res } = await Analysis(obj);
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  // if (res4.code == 200) {
  // state.shu3 = res4.data.scalarList[0].data;
  // state.wen3 = res4.data.scalarList[1].data;
  // state.er3 = res4.data.scalarList[3].data
  // state.pm3 = res4.data.scalarList[4].data
  // state.shi3 = res4.data.scalarList[2].data
  // }
  let myChart3 = echarts.init(document.getElementById("main3"));
  myChart3.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      icon: "rect",

      itemWidth: 20,
      itemHeight: 1,
      data: ["室内"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",

      boundaryGap: false,
      // data: [
      //   "00:00",
      //   "02:00",
      //   "04:00",
      //   "06:00",
      //   "08:00",
      //   "10:00",
      //   "12:00",
      //   "14:00",
      //   "16:00",
      //   "18:00",
      //   "20:00",
      //   "22:00",
      //   "24:00",
      // ],
      data,
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        data: data2,
        itemStyle: {
          opacity: 0.5,
        },
      },
    ],
  });
};
const dateT1Change = () => {
  getBanGong(BanGongStr.value, dateT1.value);
};
const dateT2Change = () => {
  getQuYu(BanGongStr.value, dateT2.value);
};
const dateL2Change = () => {
  getShangYe(BanGongStr.value, dateL2.value);
};
const dateZhChange = () => {
  getZongHe(ZongHeStr.value, dateZh.value);
};
const dateXiangGuanChange = () => {
  F(XiangGuanStr.value, XiangGuanStr2.value, [
    start_end_time.value[0],
    start_end_time.value[1],
  ]);
};
const getShangYe = async (type, date = dayjs().format("YYYY-MM-DD")) => {
  let obj = {
    dataType: "hour",
    dayFrom: dayjs(date).format("YYYY-MM-DD"),
    dayTo: dayjs(date).format("YYYY-MM-DD"),
    firstType: "数据分析",
    indicatorName: "商业区域L2F-趋势",
    thirdType: type,
    projectId: 1,
  };

  // let obj4 = {
  //   dataType: "scalar",
  //   dayFrom: "1900-01-01",
  //   dayTo: "2023-01-02",
  //   firstType: "",
  //   indicatorName: "办公区域",
  //   thirdType: "",
  // };
  let data = ["0"]; // 时间
  let data1 = ["0"]; // type1数据
  let data2 = ["0"]; // type2数据
  let data3 = ["0"]; // type3数据
  let { data: res } = await Analysis(obj);
  // let res4 = await Scalar(obj4);
  console.log(res, "11111111res");
  if (res.code == 200) {
    res.data.commonHourlyDataList.forEach((item) => {
      if (item.type == "type1") {
        data1.push(item.number1);
      } else if (item.type == "type2") {
        data2.push(item.number1);
      } else if (item.type == "type3") {
        data3.push(item.number1);
      }
      data.push(String(item.hour).padStart(2, "0") + ":00");
    });
  }
  // if (res4.code == 200) {
  //   state.shu4 = res4.data.scalarList[0].data;
  //   state.wen4 = res4.data.scalarList[1].data;
  //   // state.er4 = res4.data.scalarList[3].data
  //   // state.pm4 = res4.data.scalarList[4].data
  //   // state.shi4 = res4.data.scalarList[2].data
  // }
  let myChart4 = echarts.init(document.getElementById("main4"));
  myChart4.setOption({
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["室外1", "室内"],
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      // data: [
      //   "00:00",
      //   "02:00",
      //   "04:00",
      //   "06:00",
      //   "08:00",
      //   "10:00",
      //   "12:00",
      //   "14:00",
      //   "16:00",
      //   "18:00",
      //   "20:00",
      //   "22:00",
      //   "24:00",
      // ],
      data,
      min: 1,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "室内",
        type: "line",
        stack: "Total",
        lineStyle: { color: "#479bd0" },
        itemStyle: { color: "#479bd0" },
        data: data1,
      },
      {
        name: "室外",
        type: "line",
        stack: "Total",

        data: data2,
        itemStyle: {
          opacity: 0,
        },
      },
    ],
  });
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.box {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  .card-01 {
    margin-left: 5px;
    width: 900px;
    height: 302px;
    position: relative;

    .zhpj {
      position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .echarts-01 {
      margin-top: 70px;
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
          padding: 0.425rem;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 16px;
          margin-bottom: 4px;

          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: -9px;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    #main {
      margin-left: 280px;
      bottom: 70px;
    }

    .select-css {
      position: absolute;
      width: 100px;
      bottom: 190px;
      margin-left: 605px;
    }

    .selectRiqi {
      position: absolute;
      bottom: 190px;
      margin-left: 725px;
      width: 144px;

      :deep(.el-input__inner) {
        width: 140px;
      }
    }

    .title-echrts {
      position: absolute;
      bottom: 203px;
      margin-left: 290px;
      font-size: 14px;
      color: #7f7f7f;
    }

    .echats-main {
      display: flex;
    }
  }

  .card-02 {
    margin-left: 5px;
    width: 900px;
    height: 980px;
    margin-top: 5px;

    .zhpj {
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 904px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .bangong {
      position: absolute;
      margin-top: 15px;
      margin-left: 16px;
      font-size: 16px;
      color: #7f7f7f;
    }

    .bangong1 {
      margin-top: 20px;
      padding-bottom: 20px;
      margin-left: 16px;
      font-size: 16px;
      color: #7f7f7f;
    }

    .echarts-01 {
      margin-top: 50px;
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
          margin-left: 1.25rem;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 16px;
          margin-bottom: 4px;
          padding: 0.625rem;
          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: 0.625rem;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    .echarts-02 {
      margin-left: 10px;
      width: 77px;
      height: 59px;
      border: 1px solid #7f7f7f;
      border-radius: 8px;
      display: flex;
      position: relative;

      .lh-css {
        margin: auto;
        font-family: SourceHanSansSC-regular;
        font-weight: 800;
        color: #fecc30;
        font-size: 24px;
      }

      .wdsd-css {
        display: flex;
        position: absolute;
        margin-left: 100px;

        .dushu-01 {
          margin-bottom: 32px;
        }

        .wendu {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
          padding: 0.625rem;
        }

        .dushu {
          font-family: SourceHanSansSC-regular;
          font-weight: normal;
          color: #277bcb;
          font-size: 16px;
          margin-bottom: 4px;

          .spancdu {
            color: #7e7e7e;
            font-size: 12px;
          }
        }

        .fangwei {
          color: #7e7e7e;
          font-size: 12px;
          margin-left: -9px;
        }

        .eyht {
          font-family: SourceHanSansSC-regular;
          color: #7e7e7e;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }
    }

    #main2 {
      margin-left: 280px;
      bottom: 70px;
    }

    #main3 {
      margin-left: 280px;
      bottom: 70px;
    }

    #main4 {
      margin-left: 280px;
      bottom: 70px;
    }

    .select-css {
      display: flex;
      position: absolute;
      width: 100px;
      bottom: 240px;
      margin-left: 605px;
    }

    .selectRiqi {
      position: absolute;
      bottom: 240px;
      margin-left: 725px;
      width: 144px;

      :deep(.el-input__inner) {
        width: 140px;
      }
    }

    .title-echrts {
      position: absolute;
      bottom: 250px;
      margin-left: 290px;
      font-size: 14px;
      color: #7f7f7f;
    }

    .echats-main {
      display: flex;
      position: relative;
      border-bottom: 1px dotted #dbe0ed;

      .xuxian {
        border-bottom: 1px dotted #dbe0ed;
      }
    }
  }

  .card-03 {
    width: 93%;
    height: 145px;
    margin-left: 5px;

    .zhpj {
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 600;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .switch-css {
      display: flex;
      margin-top: 15px;
      justify-content: space-between;
      width: 80%;
      :deep(.el-switch.is-checked .el-switch__core) {
        border-color: #8faadc;
        background-color: #8faadc;
      }

      span {
        margin-right: 20px;
      }
    }
  }

  .card-04 {
    width: 93%;
    margin-left: 5px;
    margin-top: 6px;
    height: 700px;
    display: flex;

    .zhpj {
      display: flex;
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .anniu > div:first-child {
      margin-left: 330px;
    }

    .anniu {
      display: flex;

      .bccolorDiv {
        width: 80px;
        height: 30px;
        background-color: #dbe0ed;
        border-radius: 4px;
        position: relative;
        margin-left: 20px;

        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #4d62a5;
        }
      }

      .Div {
        width: 80px;
        height: 30px;
        background-color: #ebebeb;
        border-radius: 4px;
        position: relative;
        margin-left: 20px;

        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .block {
      margin-top: 40px;
      margin-left: 590px;
    }
  }

  .card-05 {
    width: 93%;
    margin-left: 5px;
    margin-top: 6px;
    height: 430px;
    .zhpj {
      display: flex;
      // position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 890px;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .select-css {
      display: flex;

      .select01 {
        width: 100px;
        margin-left: 130px;
      }

      .select02 {
        width: 100px;
        margin-left: 30px;
      }

      .block_time {
        margin-left: 20px;
      }
    }

    .main6 {
      // .dwxshi {
      // margin-top: 80px;
      // }

      margin-top: 50px;
    }
  }
}
</style>
